<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <el-row>
      <el-form :model="queryParams" label-width="auto">
        <el-form-item label="日期范围" prop="createdTime">
          <el-date-picker
            v-model="queryParams.createdTime"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            range-separator="至"
            clearable
            @change="getChartTotal"
            @clear="getChartTotal"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            :disabled-date="disabledDate"
          />
        </el-form-item>
      </el-form>
    </el-row>

    <!-- 数据卡片 -->
    <el-row :gutter="10">
      <el-col
        :xs="20"
        :sm="10"
        :lg="6"
        v-for="(item, index) in cardData"
        :key="index"
      >
        <el-card shadow="never" class="mb-1">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-[var(--el-text-color-secondary)]">{{
                item.title
              }}</span>
              <el-tag :type="item.tagType">
                {{ item.tagText }}
              </el-tag>
            </div>
          </template>

          <div class="flex items-center justify-between mt-0">
            <span> {{ item.dataDesc }} </span>
            <span> &yen;{{ item.totalprice }} </span>
          </div>

          <div
            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
          >
            <div class="text-lg text-right">下单量：{{ item.count }}</div>
            <svg-icon :icon-class="item.iconClass" size="2em" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- Echarts 图表 -->
    <el-row :gutter="10" class="mt-2">
      <el-col
        :xs="24"
        :sm="12"
        :lg="12"
        class="mb-2"
        v-for="item in chartData"
        :key="item"
      >
        <component
          :is="chartComponent(item)"
          :id="item"
          :chartDataList="chartDataList"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import type { EpPropMergeType } from "element-plus/es/utils/vue/props/types";
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});
import { ref, onMounted, PropType } from "vue";
import request from "@/utils/request";
import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";
import Abso_chartTotalAPI from "@/api/abso/orderTotal/chartTotal";
import { ChartTotalData, ChartTotalVo } from "@/api/abso/orderTotal/model";

onMounted(() => {
  getChartTotal();
});

const queryParams = reactive({
  createdTime: [],
});

const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "最近三月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
  {
    text: "上个月",
    value: () => {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth();
      const start = new Date(year, month - 1, 1);
      const end = new Date(year, month, 0);
      return [start, end];
    },
  },
];

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

const userStore = useUserStore();
const date: Date = new Date();
// const greetings = computed(() => {
//   const hours = date.getHours();
//   if (hours >= 6 && hours < 8) {
//     return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
//   } else if (hours >= 8 && hours < 12) {
//     return "上午好，" + localStorage.getItem("name") + "！";
//   } else if (hours >= 12 && hours < 18) {
//     return "下午好，" + localStorage.getItem("name") + "！";
//   } else if (hours >= 18 && hours < 24) {
//     return "晚上好，" + localStorage.getItem("name") + "！";
//   } else {
//     return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
//   }
// });

const chartDataList = ref<ChartTotalData[]>([]);
const cardData = ref<CardProp[]>([]);

// 初始化-获取数据
function getChartTotal() {
  Abso_chartTotalAPI.getChartTotal(queryParams).then((data) => {
    console.log(data, "data");
    const slicedData = data.data.data;
    chartDataList.value = slicedData;
    // chartDataList.value = data.data.data;
    cardData.value = slicedData.map((item: any) => {
      return {
        title: item.user_type,
        tagType: "success",
        tagText: "VIP",
        count: item.counts,
        dataDesc: "销售额",
        iconClass: "money",
        totalprice: item.totalprice,
      };
    });
  });
}

function getImageUrl() {
  const datas = {};
}

const loading = ref(false); //  加载状态

/** 重置查询 */
function handleResetQuery() {
  queryParams.createdTime = [];
  getChartTotal();
}

interface CardProp {
  title: string;
  tagType: EpPropMergeType<
    StringConstructor,
    "primary" | "success" | "info" | "warning" | "danger",
    unknown
  >;
  tagText: string;
  count: any;
  dataDesc: string;
  iconClass: string;
}

// 图表数据
const chartData = ref(["BarChart", "PieChart"]);
const chartComponent = (item: string) => {
  return defineAsyncComponent(() => import(`./components/${item}.vue`));
};

onMounted(() => {
  getImageUrl();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}
</style>
